<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign-In</title>
    <script src="/static/js/jquery-3.6.0.js"></script>
    <link href="/static/css/signin.css" rel="stylesheet"/>
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap.css" rel="stylesheet">
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap-reboot.css" rel="stylesheet">
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap-grid.css" rel="stylesheet">
    <script src="/static/bootstrap-4.6.1-dist/js/bootstrap.bundle.js"></script>
    <script src="/static/bootstrap-4.6.1-dist/js/bootstrap.js"></script>

    <meta name="theme-color" content="#563d7c">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
        .toback{
            border-radius: 100%;
            width: 8000px;
            height: 8000px;
            position: absolute;
            left: -4000px;
            top: -4000px;
            background-color: lightblue;
            cursor: pointer;
            z-index: 999;
        }
        .toback:hover{
            background-color: lightskyblue;
        }
    </style>
    <!-- Custom styles for this template -->
    <link href="/static/css/signin.css" rel="stylesheet">
</head>
<body class="text-center" id="signin-bodystyle">
<div class="toback" id="tb"></div>
<form class="form-signin" action="/user/login" method="post">
    <img class="mb-4" src="/static/image/Cloudy.svg" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">登录</h1>
    <label for="inputEmail" class="sr-only">邮箱地址</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="邮箱地址" name="user_email" required autofocus>
    <label for="inputPassword" class="sr-only">密码</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="密码" name="user_password" required>
    <!--<div class="checkbox mb-3">-->
    <!--    <label>-->
    <!--        <input type="checkbox" value="remember-me"> Remember me-->
    <!--    </label>-->
    <!--</div>-->
    <button class="btn btn-lg btn-primary btn-block" id="sign-in" type="button">登录</button>
    <button class="btn btn-lg btn-primary btn-block" type="button" id="register">注册</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2022-2022</p>
</form>

<script>
    $('#sign-in').click(function (){
        const params = $('.form-signin').serializeArray();
        const j = {};
        for (const item in params) {
            j[params[item].name] = params[item].value;
        }
        $.ajax({
            url:'/user/login',
            data:JSON.stringify(j),
            type:'post',
            dataType:'json',
            headers:{
                Accept:"application/json",
                "Content-Type":"application/json"
            },
            processData:false,
            cache:false
        }).done(function (data) {
            if (data.code===10000){
                alert("用户名或密码错误");
            }else if (data.code===20000){
                window.location="/pages/index.html";
            }
        });
    })
    $('#register').click(function (){
        // console.log("按钮测试");
        //跳转到注册页面
        $(window).attr('location',"/pages/register.html");
    })
</script>
<script>
    $('#tb').click(function (){
        $('#backan').css('disabled','none');

        $('#tb').animate({
            left:'-4000px',
            top:'-4000px',
            width:'8000px',
            height:'8000px'
        },2000).css('background-color','lightskyblue')
    })
    $(document).ready(function (){
        $('#tb').animate({
            left:'-100px',
            top:'-100px',
            width:'0px',
            height:'0px'
        },2000).css('background-color','lightskyblue')
    })
</script>
</body>
</html>